<template>
  <view class="good_list">
    <!-- 搜索 -->
    <SearchInput></SearchInput>
    <!-- <view class="nav">
       <view @tap="SelectTab(index)" class="nav_item" v-for="(item,index) in nav" :key="index" :class="currentIndex===index ? 'active':''">{{item}}</view>
    </view> -->
    <Tabs :nav='nav'></Tabs>
    <scroll-view @scrolltolower="getFoot" scroll-y="true" class="footer">
      <block v-for="product in goodsList" :key="product.goods_id">
         <ProductList :goods_id="product.goods_id" :goods_small_logo="product.goods_small_logo" :goods_name="product.goods_name" :goods_price="product.goods_price"></ProductList>
      </block>
    <!-- <view class="list" v-for="item in goodsList" :key="item.goods_id" @tap="toPageDetail(item.goods_id)">
      <image mode="widthFix" :src="item.goods_small_logo || '/static/empty.png'"></image>
      <view class="list_right">
        <view class="name">{{item.goods_name}}</view>
         <view class="price">{{item.goods_price}}</view>
      </view>
    </view> -->
    </scroll-view>
  </view>
</template>

<script>
import http from '@/utils/http.js';
import SearchInput from '@/components/SearchInput';
import ProductList from '@/components/ProductList';
import Tabs from '@/components/Tabs';
export default {
  data(){
    return{
      nav:['综合','销量','价格'],
      // currentIndex:0,
      // 后台获取的商品数据
      goodsList: [],
      cat_id:'',
      query: '',
      pagenum: 1,
      isFinish:false,
    }
  },
  onLoad(options){
    //options是接收的是url传递的参数对象id
    console.log(options);
    const {cat_id ,query }=options
    this.cat_id=cat_id || '';
    this.query= query ||'',
    // this.cat_id=options.cat_id || 12;
    this.fetchList();
  },
  components:{
    SearchInput,
    ProductList,
    Tabs
  },
  methods:{
    // SelectTab(index){
    //   this.currentIndex=index;
    // },
    //获取商品列表
    async fetchList() {
      if(this.isFinish){
        return;
      }
      uni.showLoading({
        title:'商品数据加载中',
      })
      const data= await http.get('/goods/search', { query:this.query,cid: this.cat_id,pagenum:this.pagenum,pagesize:10, });
      uni.hideLoading()
      if(data.goods.length !== 0){
         this.goodsList=this.goodsList.concat(data.goods)
      }else{
        // 表示最后一页
        this.isFinish=true;
        uni.showToast({
          title:'已经到底了',
          icon:'none'
        })
      }
    },
    //获取下一页商品数据
    getFoot(){
      //下一页
     this.pagenum=this.pagenum+1;
     this.fetchList(); 
    },
    // toPageDetail(goods_id){
    //    uni.navigateTo({
		//     url: '/pages/goods_detail/index?goods_id=' + goods_id
    //     })
    // }
  }
}
</script>

<style lang="less" scoped>
.good_list{
  // .nav{
  //   display: flex;
  //   justify-content: space-around;
  //   align-items: center;
  //   width: 750rpx;
  //   height: 88rpx;
  //   background: #fff;
  //   .nav_item{
  //     color: #999999;
  //     position: relative;
  //   }
  //   .active{
  //     color: #3f3f3f;
  //   }
  //   .active::before{
  //     content: '';
  //     position: absolute;
  //     top: 50rpx;
  //     left: -30rpx;
  //     width: 130rpx;
  //     height: 2rpx;
  //     background: red;
  //   }
  // }
  .footer{
    height: calc(100vh - 188rpx);
  // .list{
  //   display: flex;
  //   width: 698rpx;
  //   height: 209rpx;
  //   padding: 0 26rpx;
  //   image{
  //     width: 191rpx;
  //     height: 191rpx;
  //   }
  //   .list_right{
  //     display: flex;
  //     flex-direction: column;
  //     justify-content: space-around;
  //     padding-left: 26rpx;
  //     flex: 1;
  //     .name{
  //       width: 463rpx;
  //       height: 66rpx;
  //       font-size: 25rpx;
  //       color: #696969;
  //     }
  //     .price{
  //       color: #ee6973;
  //       font-size: 23rpx;
  //     }
  //   }
  //   }
  }
}
</style>